<template>
	<div class="customerget" >

		<navAndBanner></navAndBanner>>
		<div class="img1">

		</div>
		<div style="height:1px;border-top:3px solid #ffcc00;width:76.4%;margin:0 auto;"></div>
		<!-- <div class="info" >
			<div class="info1" style="margin-left: 5vw;position: relative;"><span class="info3">消费单号</span>
				<input type="" name="" class="info2" v-model="XFDH" @focus="onfocusXFDH">
				<div style="position: absolute;background-color: #eeeeee;width: 14.5vw;left: 115px;z-index: 999">
					<p class="pStyle" v-for="item in XFDHSearch" v-show="item.BillNo.indexOf(XFDH)!=-1&&showp1==true" @click="hideXFDH(item.BillNo)">{{item.BillNo}}</p>				
				</div>
			</div>
			<div class="info1"><span class="info3">存酒日期</span><span class="info2" style="padding-top:10px">{{date}}</span></div> 

			<div class="info1"><span class="info3">状&nbsp&nbsp&nbsp态</span><span class="info2">可用</span></div>
		</div> -->
		<!-- <div class="info" > -->
			<!-- <div class="info1" style="margin-left: 5vw"><span class="info3">原始单号</span>
				<input type="" name="" class="info2" v-model="YSDH">
			</div> -->
			<!-- <div style="margin-right: 4.6vw;position: relative;" ><span class="info3">业&nbsp&nbsp&nbsp务</span> -->
			<!-- <input type="" name="" class="info2" v-model="yewu" @focus="onfocusYewu"> -->
			<!-- <input type="" name="" class="info2" v-model="yewu"> -->
				<!-- <div style="position: absolute;background-color: #eeeeee;width: 14.5vw;left: 95px;z-index: 999">
					<p class="pStyle" v-for="item in yewuSearch" v-show="item.UserName.indexOf(yewu)!=-1&&showp2==true" @click="hideYewu(item.UserName)">{{item.UserName}}</p>				
				</div> -->
				<!-- </div> -->
				<!-- </div> -->
				<div class="info">
					<!-- 姓名下拉框 -->
					<div class="info1" style="margin-left: 5vw;position: relative">
						<span class="info3">客户姓名</span>
						<!-- 	<input type="text" name="" class="info2" v-model="mName" @focus="onfocusName" @blur="onblurCode"> -->
						<input type="text" name="" class="info2" v-model="mName" >
				<!-- <div style="position: absolute;background-color: #eeeeee;width: 14.5vw;left: 115px;z-index: 999;">
					<p class="pStyle" v-for="item in nameSearch" v-show="item.mName.indexOf(mName)!=-1&&showp3==true" @click="hideName(item.mName)">{{item.mName}}</p>
					 
				</div> -->
			</div>
			<!-- 	电话下拉框 -->
			<div class="info1" style="position: relative;">
				<span class="info3">联系电话</span>
				<!-- <input type="text" name="" class="info2" v-model="Mobile" @focus="onfocusMobile" @blur="onblurCode"> -->
				<input type="text" name="" class="info2" v-model="Mobile" @keyup.13="getCustomerInfo" @blur="getCustomerInfo">
				<!-- <div style="position: absolute;background-color: #eeeeee;width: 14.5vw;left: 115px;z-index: 999">
					<p  class="pStyle" v-for="item in mobileSearch" v-show="item.mCode.indexOf(Mobile)!=-1&&showp4==true" @click="hideMobile(item.Mobile)"  >{{item.Mobile}}</p>					
				</div> -->
			</div> 

			<div class="info1" style="position: relative;">
				<span class="info3">会员号</span>
				<!-- 	<input type="text" name="" class="info2" v-model="cardCode" @focus="onfocusCode" @blur="onblurCode"> -->
				<input type="text" name="" class="info2" v-model="cardCode">
				<!-- 会员号下拉框 -->
				<!-- <div style="position: absolute;background-color: #eeeeee;width: 14.5vw;left: 89px;z-index: 999">
					<p  class="pStyle" v-for="item in numSearch" v-show="item.mCode.indexOf(cardCode)!=-1&&showp5==true" @click="hideCode(item.mCode)"  >{{item.mCode}}</p>					
				</div> -->				
			</div>
			
		</div>
		<!-- 文本输入框 -->
		<div class="info">
			<div style="margin-left: 5vw"><span class="info3">备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注</span>
				<textarea style="width: 60.5vw;height: 100px;background-color: #eeeeee;display: inline-block;margin-left: 23px;border-radius: 15px;outline: none;border: none;padding: 10px" v-model="BZ"></textarea>
			</div>
		</div>
		<div style="height:1px;border-top:3px solid #eeeeee;width:69%;margin:0 auto;"></div>
		<div class="info">
			<!-- 商品名称下拉 -->
			<div class="info1" style="margin-left: 5vw;position: relative;">
				<span class="info3">商品名称</span>
				<!-- <input type="" name="" class="info2" v-model="SPMC" @focus="onfocusSPMC" @blur="onblurCode"> -->
				<button class="info2" @click="onfocusSPMC">{{SPMC}}</button>
				<!-- <div style="position: absolute;background-color: #eeeeee;width: 14.5vw;left: 89px;z-index: 999">
					<p  class="pStyle" v-for="item in spmcSearch" v-show="item.MenuItemCName.indexOf(SPMC)!=-1&&showp6==true" @click="hideSPMC(item.MenuItemCName)"  >{{item.MenuItemCName}}</p>					
				</div> -->	
			</div>
			<div class="info1" style="position: relative;">
				<span class="info3">商品编号</span>
				<input type="" name="" class="info2" v-model="SPBM" @focus="onfocusSPBM"  @blur="onblurCode">
				<div style="position: absolute;background-color: #eeeeee;width: 14.5vw;left: 89px;z-index: 999">
					<p  class="pStyle" v-for="item in spbmSearch" v-show="item.MenuItemCName.indexOf(SPBM)!=-1&&showp7==true" @click="hideSPBM(item.MenuItemCode)"  >{{item.MenuItemCode}}</p>					
				</div>	
			</div> 

			<div class="info1"><span class="info3">数&nbsp&nbsp&nbsp&nbsp&nbsp量</span>
				<input type="" name="" class="info2" v-model="SL" @blur="onblurSL">
				<p style="color: red" v-show="isTrue">若散存请输入1一下数字</p>
			</div>
		</div>
		<div class="info">
			<div class="info1" style="margin-left: 5vw">
				<span class="info3">存&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp期</span>
				<!-- <input type="" name="" class="info2" v-model="CQ"> -->
				<select class="info2" v-model="CQ">
					<option value ="15">15天</option>
					<option value ="30">30天</option>
				</select>
			</div>
			<div class="info1" style="position: relative;">
				<span class="info3">业&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp务</span>
				<input type="" name="" class="info2" v-model="yewu">
				
			</div> 

			<div class="info1"><!-- <span class="info3">来&nbsp&nbsp&nbsp&nbsp&nbsp源</span> -->
				<!-- <input type="text" name="" class="info2"> -->
				<!-- <span class="info2"></span> -->
			</div>
		</div>
		<div class="info">
			<button class="btn" style="margin-left: 4.8vw" v-show="print" @click="printWine">打印</button>
			<!-- <button class="btn" style="background-color: #dcdcdc;color: black;margin-left: 41.4vw" @click="deletecunjiuMessage">移除列表</button> -->
			<button class="btn" style="margin-left: 38px" @click="addcunjiuMessage">加入列表</button></div>
			<div style="width: 70.4%;margin: 0 auto;margin-bottom:125px">
				<Table :columns="columns1" border :data="cunjiuMessage" @on-select="printlist" @on-select-all="printlist"></Table>
				<div style="text-align: center;margin-top: 10px"><button class="btn" @click="save">储存</button></div>
			</div>

			<div class="footer">
				<p>kqmts   &copy 2015-2017 All Rights Reserved</p>
				<p>川ICP备16020686号</p>
			</div>
			<Modal title="对话框标题" v-model="suc" class-name="vertical-center-modal">
				<p style="text-align:center;font-size:24px">储存成功</p>
				
			</Modal>
			<Modal title="对话框标题" v-model="fail" class-name="vertical-center-modal">
				<p style="text-align:center;font-size:24px">储存失败</p>
				
			</Modal>
			<div style="overflow: scroll;margin:auto;top: 0;bottom: 0;left: 0;right: 0;z-index: 999;width:1000px;height:800px;position:fixed;background:white;border:2px solid #7ecef4;" v-show="showList">
				<!-- <p  class="pStyle" v-for="item in spmcSearch" v-show="item.MenuItemCName.indexOf(SPMC)!=-1&&showp6==true" @click="hideSPMC(item.MenuItemCName)"  >{{item.MenuItemCName}}</p> -->
				<div style="margin-bottom: 20px;text-align: center;margin-top: 20px">
					<input type="" name="" class="info2" v-model="SPMC">
					<button  style="background: #7ecef4;width: 50px;height: 30px;margin-left: 10px;outline: none;border: none;" @click="showList = false">关闭</button>
				</div>
				<div class="selectwine" v-show="item.MenuItemCName.indexOf(SPMC)!=-1&&showp6==true" v-for="item in spmcSearch" @click="hideSPMC(item.MenuItemCName)"  >{{item.MenuItemCName}}</div>
				

			</div>
			
		</div> 
	</template>
	<script>
		import navAndBanner from '../navAndBanner.vue'
		export default {
			components:{
				navAndBanner
			},
			data(){
				return{
					print:false,
					suc:false,
					fail:false,
					columns1: [
					{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '序列',
						key: 'XL'
					},
					{
						title: '商品编码',
						key: 'SPBM'
					},
					{
						title: '商品名称',
						key: 'SPMC'
					},
					{
						title: '单位',
						key: 'DW'
					},
					{
						title: '数量',
						key: 'SL'
					},
					{
						title: '库存',
						key: 'KC'
					},
					{
						title: '存期',
						key: 'CQ'
					},
					{
						title: '到期日期',
						key: 'DQRQ'
					},
					{
						title: '来源去向',
						key: 'LYQX'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								// h('Button', {
								// 	props: {
								// 		type: 'primary',
								// 		size: 'small'
								// 	},
								// 	style: {
								// 		marginRight: '5px'
								// 	},
								// 	on: {
								// 		click: () => {
								// 			this.show(params.index)
								// 		}
								// 	}
								// }, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.index)
										}
									}
								}, '删除')
								]);
						}
					}
					],
					cardCode:"",
					CHLX:"",
					numSearchStorage:[],
					numSearch:[],
					XFDHSearchStorage:[],//消费单号缓存
					XFDHSearch:[],
					yewuSearch:[],
					yewuSearchStorage:[],
					nameSearch:[],
					mobileSearch:[],
					spSearchStorage:[],
					spmcSearch:[],
					spbmSearch:[],
					isTrue:false,
				date:"",//当前日期
				timestamp:"",//时间戳
				userinfo:{},//用户信息
				mName:"",//客户名称
				Mobile:"",//客户手机号
				cunjiuMessage:[],
				i:1,
				SPBM:'',
				SPMC:'',
				DW:'',
				SL:'',
				KC:'',
				CQ:'30',
				BZ:"",
				DQRQ:'',
				LYQX:'',
				CanDeposit:"", // 是否允许整存
				CanHalfDeposit:"", //是否允许散存
				WholeDays: "", // 整存天数
            	HalfDays: "", // 散存天数
            	CJDMX:[],
            	yewu:"",//业务员
            	YSDH:"",//原始单号
            	XFDH:"",
            	showp1:true,
            	showp2:true,
            	showp3:true,
            	showp4:true,
            	showp5:true,
            	showp6:true,
            	showp7:true,
            	showList:false,
            	printListInfo:[],
            	printInfo:[],
            	isSave:false,
            	CJKH:""
            }
        },
        mounted(){

        	//获取当前日期
        	console.log(this.getNowFormatDate(0))
        	this.date = this.getNowFormatDate(0)
			//拉去浏览器userinfo
			this.userinfo = JSON.parse(sessionStorage.userinfo).data
			var numArr = this.userinfo.TYQX.split('')
			
			if (numArr[numArr.length-3]=="1") {
				this.print = true
			}
			var _this = this
			//获取全部酒水数据
			this.$http.post(`${this.URL}/api/ys/menu_item`,{
				timestamp:this.getTimeStamp(),
				token:_this.userinfo.token,
				userid:_this.userinfo.YHBM
			})
			.then(function(res){
				console.log(res)
				if (res.data.error_code==0) {
					_this.spSearchStorage = res.data.data
				}
			})
			//获取业务员列表
			this.$http.post(`${this.URL}/api/ys/user`,{
				timestamp:this.getTimeStamp(),
				token:_this.userinfo.token,
				userid:_this.userinfo.YHBM
			})
			.then(function(res){
				console.log('yewu',res)
				if (res.data.error_code==0) {
					_this.yewuSearchStorage = res.data.data
				}
			})
			//获取当天消费单号
			this.$http.post(`${this.URL}/api/ys/bill_his`,{
				timestamp:this.getTimeStamp(),
				token:_this.userinfo.token,
				userid:_this.userinfo.YHBM,
				BillDate:_this.date
				// BillDate:"2017-04-01"
			})
			.then(function(res){
				
				console.log('消费数据',res)
				if (res.data.error_code==0) {
					_this.XFDHSearchStorage = res.data.data
				}
			})
			//获取会员单号列表
			
			this.$http.post(`${this.URL}/api/ys/member`,{
				timestamp:this.getTimeStamp(),
				token:_this.userinfo.token,
				userid:_this.userinfo.YHBM,
			})
			.then(function (res) {
				// body...
				_this.numSearchStorage = res.data.data
				console.log(_this.numSearchStorage)
				for (var i = _this.numSearchStorage.length - 1; i >= 0; i--) {
					if (_this.numSearchStorage[i].mCode==null) {
						_this.numSearchStorage[i].mCode = ""
					}
				}
				
			})
			
			

		},
		methods:{
			printlist:function(res){

				this.printListInfo = res
			},
			//打印
			printWine:function(){
				if (this.isSave == true) {
					for (var i = this.printListInfo.length - 1; i >= 0; i--) {
						var a = {}
						a.KHXM = this.mName;
						a.Mobile = this.Mobile;
						a.JL = this.printListInfo[i].SPMC;
						a.SL = this.printListInfo[i].SL;
						a.CJR = this.userinfo.YHMC;
						this.printInfo.push(a)
					}

					sessionStorage.printInfo = JSON.stringify(this.printInfo)
					this.printInfo = []
					window.open("#/cunjiuFunc/print")
				}
				else{
					this.instance('warning',"尚未存酒")
				}
				
				
			},
			//警告模板
			instance:function(type,message) {
				const title = type;
				const content = '<p>'+message+'</p>';
				switch (type) {
					case 'info':
					this.$Modal.info({
						title: title,
						content: content
					});
					break;
					case 'success':
					this.$Modal.success({
						title: title,
						content: content
					});
					break;
					case 'warning':
					this.$Modal.warning({
						title: title,
						content: content
					});
					break;
					case 'error':
					this.$Modal.error({
						title: title,
						content: content
					});
					break;
				}
			},
			//存酒
			save:function(){
				
				let _this = this;
				console.log(this.BZ)
				console.log(this.yewuSearchStorage)
				for (var i = this.yewuSearchStorage.length - 1; i >= 0; i--) {
					if (this.yewuSearchStorage[i].UserID == this.yewu) {
						this.yewu = this.yewuSearchStorage[i].UserName
					}
					
				}
				let data = {
					SYSUSERBM:_this.userinfo.YHBM,
					// SYSUSERBM:"9005",
					SYSUSERMC:_this.userinfo.YHMC,
					// SYSUSERMC:"吴驷驹",
					YSDH:_this.YSDH,//原始单号页面没
					KHBM:_this.cardCode,
					KHMC:_this.mName,
					KHDH:_this.Mobile,
					XFDH:_this.XFDH,
					YW:_this.yewu,//页面没
					LX:_this.CHLX,
					BZ:_this.BZ,
					CJDMX:_this.CJDMX
				}
				data = JSON.stringify(data)
				console.log("data",data)
				
				this.$http.post(`${this.URL}/api/ws/storage`,{
					timestamp:this.getTimeStamp(),
					token:_this.userinfo.token,
					userid:_this.userinfo.YHBM,
					data:data
				})
				.then(function(res){
					if (res.data.error_code == 0) {
						_this.CJKH = res.data.data.CJKH
						_this.suc = true;
						_this.isSave = true

					}
					else{
						_this.fail = true
						_this.isSave = false
					}
				})
			},
			//日期计算
			addDate:function (date,days){ 
				days = parseInt(days)
				var d=new Date(date); 
				d.setDate(d.getDate()+days); 
				var m=d.getMonth()+1; 
				return d.getFullYear()+'-'+m+'-'+d.getDate(); 
			},
			// 存酒信息加入列表
			addcunjiuMessage:function(){
				if (this.CQ&&this.SPMC&&this.SL) {
					var message = {};

					message.XL = this.i;
					message.SPBM = this.SPBM;
					message.SPMC = this.SPMC;
					message.DW = this.DW;
					message.SL = this.SL;
					message.KC = this.KC;
					message.CQ = this.CQ;
					message.DQRQ = this.DQRQ;
					message.LYQX = this.LYQX;
					message.DQRQ = this.addDate(this.date,this.CQ)
					var CJDmessage={
					 XH:this.i, // 序号
           			 SPBM:message.SPBM, // 商品编码
            		 SPMC:message.SPMC, // 商品名称
           			 GGXH:"", // 规格型号
           			 SL:message.SL,   // 数量
            		 YXQ:message.CQ,  // 有效期
            		 BZBM:"", // 部组编码
            		 BZ:""    // 备注
            		}
            		this.cunjiuMessage.push(message);
            		this.CJDMX.push(CJDmessage);
            		this.i = this.i+1
            	}else{

            		this.instance('warning',"请检查酒水信息是否输入完全")
            	}

            },
			//获取单个酒水信息
			getWineInfo:function(){
				let _this = this
				this.$http.post(`${this.URL}/api/ys/menu_item_info`,{
					userid:_this.userinfo.YHBM,
					token:_this.userinfo.token,
					timestamp:_this.getTimeStamp(),
					MenuItemCode:_this.SPBM,
					MenuItemCName:_this.SPMC
				})
				.then(function(res){
					if (res.data.error_code == 0) {
						_this.SPBM = res.data.data.MenuItemCode;
						_this.SPMC = res.data.data.MenuItemCName;
						_this.DW = res.data.data.Standard;
						_this.SL = 1;
						_this.CQ = res.data.data.WholeDays;
						_this.WholeDays = res.data.data.WholeDays;
						_this.HalfDays = res.data.data.HalfDays;
					}
				})
			},
			 //获取单个客户信息
			 getCustomerInfo:function(){
			 	let _this = this
			 	this.$http.post(`${this.URL}/api/ys/member_info`,{
			 		userid:_this.userinfo.YHBM,
			 		token:_this.userinfo.token,
			 		timestamp:_this.getTimeStamp(),
			 		mCode:_this.cardCode,
			 		mName:_this.mName,
			 		Mobile:_this.Mobile
			 	})
			 	.then(function(res){
			 		if (res.data.error_code == 0) {
			 			_this.cardCode=res.data.data.mCode,
			 			_this.mName=res.data.data.mName,
			 			_this.Mobile=res.data.data.Mobile
			 		}
			 		
			 	})
			 },
			// 生成时间戳
			getTimeStamp:function(){
				var timestamp=new Date().getTime()
				return timestamp
			},
			getNowFormatDate:function(timetype){
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if (timetype == 1) {
					var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
					+ " " + date.getHours() + seperator2 + date.getMinutes()
					+ seperator2 + date.getSeconds();
					return currentdate;
				}
				else{
					var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
					return currentdate;
				}
			},
			searchfunc:function(){

			},
			//仓促下面代码之后需要封装
			hideXFDH:function(XFDH){
				this.XFDH = XFDH;
				this.XFDHSearch = []	
			},
			hideYewu:function(yewu){
				this.yewu = yewu;
				this.yewuSearch = [];

			},
			hideSPBM:function(SPBM){
				this.SPBM = SPBM;
				this.spbmSearch = [];
				this.getWineInfo()
			},
			hideSPMC:function(SPMC){
				console.log(11111)
				this.SPMC = SPMC;
				this.spmcSearch = [];
				this.getWineInfo();
				this.showList = false
			},
			hideCode:function(mCode){
				this.isTrue = false;
				this.cardCode = mCode;
				this.numSearch = [];
				this.getCustomerInfo();

			},
			hideName:function(mName){
				// this.isTrue = false;
				this.mName = mName;
				this.nameSearch = [];
				this.getCustomerInfo();
			},
			hideMobile:function(Mobile){
				this.Mobile = Mobile;
				this.mobileSearch = [];
				this.getCustomerInfo();
			},
			onfocusXFDH:function(){
				this.showp1 = true
				this.XFDHSearch = this.XFDHSearchStorage
			},
			onfocusYewu:function(){
				this.showp2 = true
				this.yewuSearch = this.yewuSearchStorage
			},
			onfocusSPBM:function(){
				this.showp7 = true		
				this.spbmSearch = this.spSearchStorage
				
			},
			onfocusSPMC:function(){
				this.showList = true
				this.showp6 = true
				this.spmcSearch = this.spSearchStorage 
				this.SPMC =""
			},
			onfocusCode:function(){
				this.showp5 = true
				console.log(this.numSearch)
				this.numSearch = this.numSearchStorage 		
			},
			onfocusName:function(){
				this.showp3 = true
				console.log(this.numSearch)
				this.nameSearch = this.numSearchStorage 
			},
			onfocusMobile:function(){
				this.showp4 = true
				this.mobileSearch = this.numSearchStorage 
			},
			onblurCode:function(){
				console.log("cc",this.showp6)
				var _this = this
				setTimeout(()=>{
					this.showp1 = false
					this.showp2 = false
					this.showp3 = false
					this.showp4 = false
					this.showp5 = false
					this.showp6 = false
					this.showp7 = false
				},500)
				
			},
			
			onblurSL:function(){
				if (this.SL>1&&this.SL.indexOf(".")!=-1) {
					this.isTrue = true
				}
				else if(this.SL<1){
					console.log('<1')
					this.CQ = this.HalfDays
				}
				else{
					console.log('>1')
					this.CQ = this.WholeDays
				}
			},
			remove:function(index){
				this.cunjiuMessage.splice(index, 1);
				this.CJDMX.splice(index, 1);
			},
			toindex:function(){
				this.$router.push("/index")
			}
		}
	}
</script>

<style scoped>
	.selectwine{
		display:inline-block;flex:1;width:5.5vw;height:3.6vw;border:1px solid white;background:#7ecef4;color:white;text-align: center;font-size: 0.8vw;
		vertical-align: middle;padding-top: 1vw
	}
	.vertical-center-modal{
		display: flex;
		align-items: center;
		justify-content: center;	
	}
	.ivu-modal{
		top: 0;
	}
	.pStyle{
		cursor: pointer;

	}
	.btn{
		width: 150px;height: 50px;border-radius: 5px;border:none;outline: none;background-color: #ffcc00;color: white;font-size: 20px
	}
	.info2{
		width: 14.5vw;
		height: 50px;
		background-color: #eeeeee;
		display: inline-block;
		border-radius: 15px;
		margin-left: 23px;
		border:none;
		outline: none;
		padding-left: 20px;
	}
	.info1{
		
		display: inline-block;
		flex: 1;
		height: 50px;
	}
	.info{
		width: 76.4%;
		
		margin: 0 auto;
		padding: 35px 0px;
		font-size: 20.5px;
		display: flex;

	}
	.img1{
		background: url(../../assets/img/Title.png);
		width: 444px;
		height: 78px;
		margin:0 auto;
		margin-top: 90px;margin-bottom: 80px;
	}
	.navAndBanner{
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		width: 100%;
		height: 120px;
		vertical-align: middle;
		padding-top: 40px
		
	}
	a{
		text-decoration: none;
	}
	nav ul li{
		display: inline-block;
		vertical-align: middle;
		margin-right: 5%
	}
	nav ul li a{
		font-size: 24px;
		color: #999999;
	}
	nav ul li:first-child{
		margin-left: 13%;
		margin-right: 15%;
	}
	nav ul li:last-child{
		margin-top: 12px;
		float: right
		
	}
	body{background-color: #1E1E1E}
	*{padding:0;margin: 0;list-style:none;font-family: "微软雅黑"}
	.footer{
		height: 125px;
		width: 100%;
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		text-align: center;
		vertical-align: middle;
		color: white;
		padding-top: 50px
	}
</style>